<template>
  <div>
    <el-carousel :interval="3000" height="40vh">
      <el-carousel-item v-for="item in carouseImgInfo.infoList" :key="item">
        <img :src="item.url" alt="" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, reactive } from "vue";
import { ImageReturnInfo } from "@/types";
import { getCarouselImagesList } from "@/api";

const carouseImgInfo = reactive({
  infoList: new Array<ImageReturnInfo>(),
});
onBeforeMount(() => {
  getCarouselImagesList().then((res) => {
    carouseImgInfo.infoList = res.data.picture_infos;
  });
});
</script>

<style scoped>
.carousel-image {
  height: 100%;
  width: fit-content;
}
</style>
